<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片上传示例</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        /* 单次多张 */
        .app1 {
            width: 80%;
            margin: 50px;
            border: 1px solid #000
        }

        .box1 {
            display: inline-block;
            margin: 16px;
        }

        #select1 {
            display: none;
        }

        .label1 {
            display: inline-block;
            width: 50px;
            height: 50px;
            background: url('./img/plus.png') center center/cover no-repeat;
        }

        .img-box {
            position: relative;
            display: inline-block;
            width: 100px;
            height: 100px;
            text-align: center;
            margin: 10px;
        }

        .img-show {
            height: 100%;
            /* 根据长边缩放 */
            object-fit: cover;
            z-index: -1;
        }

        .img-remove {
            position: absolute;
            display: inline-block;
            width: 24px;
            height: 24px;
            right: 10px;
            top: 10px;
            background: url('./img/delete.png') center center/contain no-repeat;
            z-index: 3;
        }


        /* 多次多张 */
        ul {
            width: 80%;
            margin: 50px;
            border: 1px solid #000
        }

        .y-img-wrap {
            position: relative;
            overflow: hidden;
        }

        .y-up-btn {
            position: absolute;
            width: 100px;
            height: 100px;
            opacity: 0;
            z-index: 9;
        }

        .y-img {
            width: 100px;
            height: 100px;
            background-size: cover;
        }

        .submit-group {
            text-align: center;
        }

        .submit {
            display: inline-block;
            width: 100px;
            height: 40px;
            line-height: 40px;
            border-radius: 5px;
            background-color: rgb(13, 190, 72);
            text-align: center;
            color: #fff;
        }
    </style>
</head>

<body>
    <div>
        <div class="app1">
            <h2>单次多选图片上传</h2>
            <div class="box1">
                <input type="file" accept="image/*" id="select1" multiple>
                <label for="select1" class="label1"></label>
            </div>
            <div class="container">
                <!-- <div class="img-box">
                    <img src="./img/plus.png" class="img-show">
                    <div class="img-remove"></div>
                </div> -->
            </div>
        </div>
    </div>
    <ul>
        <h2>多次单选图片上传</h2>
        <li class="y-img-wrap">
            <input type="file" accept="image/*" class="y-up-btn">
            <img src="./img/plus.png" alt="" class="y-img">
        </li>
        <li class="y-img-wrap">
            <input type="file" accept="image/*" class="y-up-btn">
            <img src="./img/plus.png" alt="" class="y-img">
        </li>
    </ul>
    <div class="submit-group">
        <div onclick="submit()" class="submit">提交图片1</div>
        <div onclick="submit2()" class="submit">提交图片2</div>
    </div>
    <script src="./js/jquery-1.9.1.min.js"></script>
    <script src="./js/upload.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>